/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useState, useMemo } from "react";
import { Button, Form, Row, Col, Modal, message } from "antd";
import { triggerDownloadFile } from "@/utils/utils";
import CreateBill from "./CreateBill/index";
import ImportFiles from "./ImportFiles";

const Bar = props => {
  const { rowsKeys, onDelete, onEdit, POST, refreshPage } = props;
  const [importVisible, setImportVisible] = useState(false);

  const calcuPostage = () => {
    POST({
      type: "order_calculate/rePostage",
      payload: {
        waybill_no: rowsKeys.join(","),
      },
    }).then(() => {
      message.success("操作成功", 1);
      refreshPage();
    });
  };

  const exportData = () => {
    const form = document.createElement("form");
    // 添加到 body 中
    document.body.appendChild(form);
    const input = document.createElement("input");
    input.type = "hidden";
    input.name = "waybill_no";
    input.value = rowsKeys.join(",");
    form.appendChild(input);
    form.method = "GET";
    // form.target = '_blank'
    form.action = "/Api/YZ/CourierStation/download";
    form.submit();
    document.body.removeChild(form);
  };

  const importModalClose = status => {
    if (status) {
      setImportVisible(true);
    } else {
      setImportVisible(false);
      refreshPage();
    }
  };

  const buttonList = useMemo(
    () => [
      {
        key: "import",
        text: "导入重量",
        disabled: false,
        render: (
          <ImportFiles visible={importVisible} onCancel={importModalClose}>
            <Button type="primary" onClick={importModalClose.bind(null, true)}>
              导入重量
            </Button>
          </ImportFiles>
        ),
      },
      {
        key: "download",
        text: "下载重量模版",
        handle: () => {
          triggerDownloadFile("/dist/files/导入重量模版.xlsx");
        },
        disabled: false,
      },
      {
        key: "delete",
        text: "删除",
        handle: () => {
          Modal.confirm({
            title: "系统提示",
            centered: true,
            content: `确定删除 ${rowsKeys.length} 条记录？`,
            okText: "确定",
            cancelText: "取消",
            onOk: onDelete,
          });
        },
        disabled: rowsKeys.length == 0,
      },
      {
        key: "edit",
        text: "批量编辑",
        handle: onEdit,
        disabled: rowsKeys.length == 0,
      },
      {
        key: "postage",
        text: "算运费",
        handle: calcuPostage,
        disabled: rowsKeys.length == 0,
      },
      {
        key: "export",
        text: "导出数据",
        handle: exportData,
        disabled: rowsKeys.length == 0,
      },
      {
        key: "createBill",
        text: "生成对账单",
        disabled: false,
        render: <CreateBill POST={POST} />,
      },
    ],
    [props, calcuPostage, setImportVisible, importModalClose, importVisible]
  );

  return (
    <Row type="flex" gutter={[20, 20]} style={{ marginBottom: 10 }}>
      {buttonList.map(item => (
        <Col key={item.key}>
          {item.render || (
            <Button
              onClick={item.handle}
              disabled={item.disabled}
              type="primary"
              loading={props[item.key]}
            >
              {item.text}
            </Button>
          )}
        </Col>
      ))}
    </Row>
  );
};

export default Form.create()(Bar);
